虛擬主機開啟動態網站 << Previous Next >> ROC Flag 成果

ROC flag(w14)

1.利用Javascirpt完成老師指定頁面的國旗

http://mde.tw/wcm2019/content/ROC%20flag.html

2.國旗的程式碼

1.Plotarea2等以此類如要增加第2、3面旗幟則須將Plotarea改成Plotarea2等以此類推，否則旗幟會出不來。

<!-- 導入 Brython 標準程式庫 -->
<script src="./../static/brython.js"></script>
<script src="./../static/brython_stdlib.js"></script>
<p></p>
<!-- 啟動 Brython -->
<script>// <![CDATA[
window.onload=function(){
// 設定 data/py 為共用程式路徑
brython({debug:1, pythonpath:['./../data/py']});
}
// ]]></script>
<p><canvas height="400" id="plotarea" width="600"></canvas></p>
<script type="text/python">// <![CDATA[
# 導入 doc
from browser import document as doc
import math
 
# 準備繪圖畫布
canvas = doc["plotarea"]
ctx = canvas.getContext("2d")
# 進行座標轉換, x 軸不變, y 軸反向且移動 canvas.height 單位光點
# ctx.setTransform(1, 0, 0, -1, 0, canvas.height)
# 以下採用 canvas 原始座標繪圖
flag_w = canvas.width
flag_h = canvas.height
circle_x = flag_w/4
circle_y = flag_h/4
# 先畫滿地紅
ctx.fillStyle='rgb(255, 0, 0)'
ctx.fillRect(0,0,flag_w,flag_h)
# 再畫青天
ctx.fillStyle='rgb(0, 0, 150)'
ctx.fillRect(0,0,flag_w/2,flag_h/2)
# 畫十二道光芒白日
ctx.beginPath()
star_radius = flag_w/8
angle = 0
for i in range(24):
    angle += 5*math.pi*2/12
    toX = circle_x + math.cos(angle)*star_radius
    toY = circle_y + math.sin(angle)*star_radius
    # 只有 i 為 0 時移動到 toX, toY, 其餘都進行 lineTo
    if (i):
        ctx.lineTo(toX, toY)
    else:
        ctx.moveTo(toX, toY)
ctx.closePath()
# 將填色設為白色
ctx.fillStyle = '#fff'
ctx.fill()
# 白日:藍圈
ctx.beginPath()
ctx.arc(circle_x, circle_y, flag_w*17/240, 0, math.pi*2, True)
ctx.closePath()
# 填色設為藍色
ctx.fillStyle = 'rgb(0, 0, 149)'
ctx.fill()
# 白日:白心
ctx.beginPath()
ctx.arc(circle_x, circle_y, flag_w/16, 0, math.pi*2, True)
ctx.closePath()
# 填色設為白色
ctx.fillStyle = '#fff'
ctx.fill()
// ]]></script>

3.輸入完程式碼確認無誤後發現旗幟還是出不來，可利用開發人員工具查看錯誤，目前最有可能的是去flaskapp.py作修改

(1)def savePage() 的修改

def savePage():
    """save all pages function"""
    page_content = request.form['page_content']
    # when element_format : "html", need to remove the annoying comment to prevent brython exec
    page_content = [w.replace('// <![CDATA[', '') for w in page_content]
    page_content = [w.replace('// ]]>', '') for w in page_content]
    # check if administrator

(3)def ssavePage() 的修改

def ssavePage():
    """seperate save page function"""
    page_content = request.form['page_content']
    # when element_format : "html", need to remove the annoying comment to prevent brython exec
    page_content = page_content.replace('// <![CDATA[', '')
    page_content = page_content.replace('// ]]>', '')
    page_order = request.form['page_order']
    if not isAdmin():

虛擬主機開啟動態網站 << Previous Next >> ROC Flag 成果